<template>
  <div class="classify">
    <van-overlay :show="show" class-name="bgcolor">
        <div class="wrapper" @click.stop>
          <div class="block" />
        </div>
      </van-overlay>
    <header class="option">
      <div class="typelist">
        <ul>
          <router-link
            :to="{
              name: 'classify',
              query: {
                style: '-1',
                area: areacolor,
                finish: finishcolor,
                free: freecolor,
                order: ordercolor,
              },
            }"
          >
            <div
              :class="`${typecolor == -1 ? 'active' : ''}`"
              @click="typecolor = -1"
            >
              全部
            </div>
          </router-link>

          <router-link
            :to="{
              name: 'classify',
              query: {
                style: item.id,
                area: areacolor,
                finish: finishcolor,
                free: freecolor,
                order: ordercolor,
              },
            }"
            v-for="item in styles"
            :key="item.id"
          >
            <li :class="`${typecolor == item.id ? 'active' : ''}`">
              {{ item.name }}
            </li>
          </router-link>
        </ul>
      </div>
      <hr />
      <div class="showlist" v-show="isShow">
        <ul class="arealist">
          <router-link
            :to="{
              name: 'classify',
              query: {
                style: typecolor,
                area: -1,
                finish: finishcolor,
                free: freecolor,
                order: ordercolor,
              },
            }"
          >
            <div
              :class="`${areacolor == -1 ? 'active' : ''}`"
              @click="areacolor = -1"
            >
              全部
            </div></router-link
          >
          <router-link
            :to="{
              name: 'classify',
              query: {
                style: typecolor,
                area: item.id,
                finish: finishcolor,
                free: freecolor,
                order: ordercolor,
              },
            }"
            v-for="item in areas"
            :key="item.id"
          >
            <li :class="`${areacolor == item.id ? 'active' : ''}`">
              {{ item.name }}
            </li></router-link
          >
        </ul>
        <ul class="finishlist">
          <router-link
            :to="{
              name: 'classify',
              query: {
                style: typecolor,
                area: areacolor,
                finish: '-1',
                free: freecolor,
                order: ordercolor,
              },
            }"
          >
            <div
              :class="`${finishcolor == -1 ? 'active' : ''}`"
              @click="finishcolor = -1"
            >
              全部
            </div>
          </router-link>
          <router-link
            v-for="item in status"
            :key="item.id"
            :to="{
              name: 'classify',
              query: {
                style: typecolor,
                area: areacolor,
                finish: item.id,
                free: freecolor,
                order: ordercolor,
              },
            }"
          >
            <li :class="`${finishcolor == item.id ? 'active' : ''}`">
              {{ item.name }}
            </li></router-link
          >
        </ul>
        <ul class="freelist">
          <router-link
            :to="{
              name: 'classify',
              query: {
                style: typecolor,
                area: areacolor,
                finish: finishcolor,
                free: '-1',
                order: ordercolor,
              },
            }"
          >
            <div
              :class="`${freecolor == -1 ? 'active' : ''}`"
              @click="freecolor = -1"
            >
              全部
            </div></router-link
          >
          <router-link
            v-for="item in prices"
            :key="item.id"
            :to="{
              name: 'classify',
              query: {
                style: typecolor,
                area: areacolor,
                finish: finishcolor,
                free: item.id,
                order: ordercolor,
              },
            }"
          >
            <li :class="`${freecolor == item.id ? 'active' : ''}`">
              {{ item.name }}
            </li></router-link
          >
        </ul>
      </div>

      <div class="footlist">
        <div class="footleft">
          <ul class="clearfix">
            <router-link
              :to="{
                name: 'classify',
                query: {
                  style: typecolor,
                  area: areacolor,
                  finish: finishcolor,
                  free: freecolor,
                  order: item.id,
                },
              }"
              v-for="item in orders"
              :key="item.id"
            >
              <li :class="`${ordercolor == item.id ? 'active' : ''}`">
                {{ item.name }}
              </li></router-link
            >
          </ul>
        </div>

        <div class="footright" @click="conshow">
          <span
            :style="`${
              isShow == true ? 'transform: rotate(135deg);top:8px;' : ''
            }`"
          ></span
          >筛选
        </div>
      </div>
    </header>
    <section>
      <!-- <router-view></router-view> -->
      <poiontlist />
    </section>
  </div>
</template>
  <script>
import { get } from "@/http/request";
import Poiontlist from "@/components/Poiont/Poiontlist.vue";

export default {
  name: "classify",
  components: {
    Poiontlist,
    
  },
  data() {
    return {
      areas: {},
      orders: {},
      prices: {},
      status: {},
      styles: {},
      isShow: false,
      typecolor: -1,
      areacolor: -1,
      finishcolor: -1,
      freecolor: -1,
      ordercolor: 0,
      show:true,
    };
  },
  methods: {
    async init() {
      await get("https://apis.netstart.cn/mbcomic/AllLabel", {
        params: {},
      }).then((res) => {
        // console.log(res.data);
        if (res.code == 0) {
          this.areas = res.data.areas;
          this.orders = res.data.orders;
          this.prices = res.data.prices;
          this.status = res.data.status;
          this.styles = res.data.styles;
        }
      });
    },
    conshow() {
      if (this.isShow) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    playcolor() {
      this.typecolor = this.$route.query.style;
      this.areacolor = this.$route.query.area;
      this.finishcolor = this.$route.query.finish;
      this.freecolor = this.$route.query.free;
      this.ordercolor = this.$route.query.order;
      console.log(this.typecolor);
    },
  },

  created() {
    this.init();
    this.typecolor = this.$route.query.style;
    this.areacolor = this.$route.query.area;
    this.finishcolor = this.$route.query.finish;
    this.freecolor = this.$route.query.free;
    this.ordercolor = this.$route.query.order;
  },
  mounted() {
    // this.typecolor = this.$route.params.style;
    // this.areacolor = this.$route.params.area;
    // this.finishcolor = this.$route.params.finish;
    // this.freecolor = this.$route.params.free;
    // this.ordercolor = this.$route.params.order;
  },
  
  watch: {
    $route(to) {
      if (this.$route.name == "classify") {
        this.typecolor = this.$route.query.style;
        this.areacolor = this.$route.query.area;
        this.finishcolor = this.$route.query.finish;
        this.freecolor = this.$route.query.free;
        this.ordercolor = this.$route.query.order;
      }
    },
    styles(newimg, oldimg) {
      if (oldimg == null) {
        this.show = true;
      } else if (newimg) {
        this.show = false;
      }
    },
  },
};
</script>

  <style lang="scss" >
.bgcolor {
  background-color: #fcfbfb;
  z-index: 1000;
}
.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .block {
    width: 120px;
    height: 120px;
    background-image: url(../../assets/1441607667576727.gif);
    background-size: cover;
    background-position-x: center;
    background-color: #fff;
  }
}
.active {
  color: #ff5f8c;
}
a {
  color: #6c727e;
}
.option {
  width: 100%;
  font-size: 12px;
  color: #6c727e;
  padding: 10px 10px 0 10px;
  .typelist {
    width: 100%;
    margin-bottom: 10px;
    padding: 0 10px;
    ul {
      display: flex;
      // justify-content: space-around;
      // align-content: center;
      flex-flow: wrap;
      div {
        margin-right: 15px;
        margin-top: 10px;
      }
      li {
        margin-top: 10px;
        margin-right: 15px;
      }
    }
  }
  .showlist {
    width: 100%;
    margin-top: 10px;
    padding: 0 10px;
    ul {
      display: flex;
      //  margin-bottom: 10px;
      margin-top: 10px;
      flex-flow: wrap;
      div {
        margin-right: 15px;
      }
      li {
        margin-right: 15px;
      }
    }
  }
  .footlist {
    width: 100%;
    height: 20px;
    // line-height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 0 10px;
    position: relative;
    .footleft {
      width: 100%;
      ul {
        width: 100%;
        display: flex;
        li {
          margin-right: 20px;
        }
      }
    }

    .footright {
      width: 30px;
      span {
        display: inline-block;
        width: 5px;
        height: 5px;
        border-left: 1px solid #6c727e;
        border-bottom: 1px solid #6c727e;
        transform: rotate(-45deg);
        position: absolute;
        top: 5px;
        right: 40px;
      }
    }
  }
}
</style>